<template>
  <div
    :class="['layout-sider', 'sider', fixSiderbar ? 'fixed-sidemenu' : null ]"
    :style="styles">
    <div class="layout-sider-children">
      <div class="logo">
        <router-link to="/">
          <!-- <img :src="logo" class="logo-img" alt="LOGO"> -->
          <h1 v-show="!collapsed" style="font-size: 24px;  font-weight: bold;" >数据标注系统</h1>
        </router-link>
      </div>
      <el-menu
        :show-timeout="200"
        :default-active="$route.path"
        :collapse="collapsed"
        class="el-menu-vertical"
        background-color="#20222a"
        text-color="rgba(255,255,255,.7)"
        active-text-color="#fff"
        :collapse-transition="false"
        mode="vertical"
        :router="true">
        <template v-for="item in menuList">
          <template v-if="item.children && item.children.length === 1">
            <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
            <el-menu-item v-else :route="{name: item.children[0].name}" :index="item.children[0].path" :key="`menu-${item.children[0].name}`"><i v-if="item.meta.icon" :class="`icon iconfont ${item.meta.icon}`" style="color: rgba(255,255,255,.7)" ></i><span slot="title">{{ showTitle(item) }}</span></el-menu-item>
          </template>
          <template v-else-if="item.children && item.children.length > 0">
            <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
            <el-menu-item v-else :index="item.path" :key="`menu-${item.name}`"><i v-if="item.icon" :class="`icon iconfont ${item.icon}`" style="color: rgba(255,255,255,.7)" ></i><span slot="title">{{ showTitle(item) }}</span></el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
// systemSettings
import { mapGetters } from 'vuex'
import SideMenuItem from './side-menu-item.vue'
import menuMixin from './mixin'
import { mixin, mixinDevice } from '@/utils/mixin'
import logo from '@/assets/logo_1.png'

export default {
  name: 'SideMenu',
  mixins: [ menuMixin, mixin, mixinDevice ],
  components: {
    SideMenuItem
  },
  data() {
    return {
      logo: logo
    }
  },
  props: {
    menuList: {
      type: Array,
      default() {
        return []
      }
    },
    collapsed: {
      type: Boolean
    }
  },
  created() {
    // console.log('systemSettings', this.systemSettings)
  },
  computed: {
    ...mapGetters(['systemSettings']),
    styles () {
      let width = 220
      if (this.collapsed) {
        width = 80
      }
      return {
        flex: `0 0 ${width}px`,
        maxWidth: `${width}px`,
        minWidth: `${width}px`,
        width: `${width}px`
      };
    }
  }
}
</script>

<style lang="scss">
@import './side-menu.scss';
</style>
